<template>
	<!-- 选择系统 -->
  <view style="width: 100%; height: 100%;">
	<!-- <view class="new-top-nav">
		<uni-nav-bar title="选择系统" backgroundColor="#fff" color="#000" statusBar="true" @clickLeft="back()"
			left-icon="arrowleft"></uni-nav-bar>
	</view> -->
	<view class="choose-company-view">
		<view class="bg"></view>
		<view class="title">
			吴兴区现代化农业园区
		</view>
		<!-- 选择系统 -->
		<view  class="homebase-box">
		  <view class="green-card" v-for="(item,index) in HomeBaseList" @click="lasttoindex(item)" >
			  <view class="card-content">
				<view class="card-line-one">
				  <text class="at">{{ item.homeBaseName }}</text>
				</view>
				<image v-if="index === 0" mode="heightFix" src="@/static/login/icon1.png" class="icon"></image>
				<image v-if="index === 1" mode="heightFix" src="@/static/login/icon2.png" class="icon"></image>
				<image v-if="index === 2" mode="heightFix" src="@/static/login/icon3.png" class="icon"></image>
				<uni-icons class="forward" type="forward" size="50" color="#fff"></uni-icons>
			  </view>
		  </view>
		</view>
	</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			HomeBaseList:[
				{
					homeBaseName: '农旅平台',
					url: 'http://192.168.0.36:8080/tourism/h5/#/',
					appId: '',
					path: ''
				},
				{
					homeBaseName: '创新服务平台',
					url: 'http://192.168.0.36:8080/innovativeServiceH5/#/pages/socialized-service/selection-system/selection-system', 
					appId: '',
					path: 'pages/socialized-service/selection-system/selection-system'
				},
				{
					homeBaseName: '园区农业综合服务平台',
					url: '/pages/socialized-service/selection-system/selection-system',
				},
			]
		}
	},
	components: {},
	onShow() {

	},
	computed: {
		
	},
	methods: {
		lasttoindex(e) {
			if (e.homeBaseName === '园区农业综合服务平台') {
				uni.switchTab({
					url: '/pages/socialized-service/selection-system/selection-system'
				})
			} else {
				if (uni.getSystemInfoSync().platform === 'mp-weixin') {
					e.appId && uni.navigateToMiniProgram({
						appId: e.appId,
						path: e.path,
						extraData: {
							username: uni.getStorageSync('username-sa'),
							password: uni.getStorageSync('password-sa')
						},
						success(res) {}
					})
				} else {
					window.location.href = e.url;
				}
			}
		},
		//退出系统
		loginout() {
			// #ifdef APP-PLUS
			plus.runtime.quit();
			// #endif
			// #ifdef MP
			uni.reLaunch({
				url: "/pages/login/login",
			});
			// #endif
		},
		back(){
			uni.reLaunch({
				url: "/pages/login/login",
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.choose-company-view{
		width: 100%;
		height: 100%;
		// display: flex;
		// flex-wrap: nowrap;
		// flex-direction: column;
		// justify-content: space-around;
		background-color: #fff;
		// padding-top: 300rpx;
		
		.bg {
			width: 100%;
			height: 280rpx;
			background: url(@/static/login/bg1.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-bottom: 40rpx;
		}
		
		.title {
			font-size: 46rpx;
			letter-spacing: 6rpx;
			text-align: center;
			margin-bottom: 50rpx;
			color: #07649d;
		}
		
		.homebase-box {
			width: 85%;
			margin: 0 auto;
			padding-top: 20rpx;
			
			.green-card {
				background: linear-gradient(to left, #259cfd, #6bbcfe);
				box-shadow: 1px 8px 8px rgba(0, 0, 0, 0.05);
				border-radius: 20px;
				min-height: 220rpx;
				width: 90%;
				border-radius: 20rpx;
				color: #fff;
				border: #f5f5f5 1px solid;
				margin-bottom: 70rpx;
				margin-left: 5%;
				display: flex;
				align-items: center;
				position: relative;
				
				&::after {
					content: '';
					width: 50%;
					height: 5px;
					border-radius: 3px;
					background-color: #ffc400;
					position: absolute;
					top: -4px;
					left: 25%;
					border: 2px solid #fff;
				}

				&:nth-child(2) {
					background: linear-gradient(to left, #576df3, #72cbf7);
				}

				&:nth-child(3) {
					background: linear-gradient(to left, #2165ff, #87abff);
				}
			  
				.card-content {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: center;

					.card-line-one {
						height: 60rpx;
						line-height: 60rpx;
						letter-spacing: 8rpx;
						color: #fff;
						font-size: 42rpx;
						white-space: nowrap;
					}
					
					.icon {
						height: 100rpx;
						margin: 26rpx auto -10rpx;
					}
					
					.forward {
						position: absolute;
						right: 3%;
					}
				}
			}
		}
	}
</style>
